<template>
  <div class="settlement-details">
    <el-dialog
      title="上月结算明细"
      center
      :visible.sync="isShow"
      width="70%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- <el-button type="text"
				class="fr mr10 exportExcel"
				icon='el-icon-download'
				@click="exportExcel('上月结算明细')"
				v-no-more-click:3000>
				导出列表
			</el-button> -->
      <exportExcel
        v-if='$store.state.user.vip != 0'
        :downLoadList.sync='downLoadList'
        class="fr" 
        ref="exportExcel"
        :excelName='excelName'
        @exportExcel='exportExcel(arguments)'>
      </exportExcel>
      <el-table
        :data="tableData"
        show-summary
        border
        :summary-method="getSummaries"
        @sort-change="tableSortChange"
        v-loading="loading">
        <el-table-column
          property="order_number"
          show-overflow-tooltip
          label="订单编号"
          min-width="150"
          align="left"
          sortable="custom"
        > 
        <template slot-scope="scope">
          <span v-if='scope.row.final'>
            {{ scope.row.final.order_number }}
          </span>
          <span>
            无
          </span>
        </template>
        </el-table-column>
        <el-table-column
          property="final_name"
          show-overflow-tooltip
          label="定稿名称"
          min-width="150"
          align="left"
          sortable="custom"
        > 
        <template slot-scope="scope">
          <span v-if='scope.row.final'>
            {{ scope.row.final.name }}
          </span>
          <span>
            无
          </span>
        </template>
        </el-table-column>
        <el-table-column
          property="name"
          show-overflow-tooltip
          label="结算名称"
          min-width="150"
          align="left"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          property="deduction"
          show-overflow-tooltip
          label="扣款金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        >
          <template slot="header">
            <span >扣款金额(元)</span>
          </template>
          <template slot-scope="scope">
            <span class="font_danger">-{{ scope.row.deduction }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="reward"
          show-overflow-tooltip
          label="奖励金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        >
          <template slot="header">
            <span >奖励金额(元)</span>
          </template>
          <template slot-scope="scope">
            <span class="font_success">+{{ scope.row.reward }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="prices"
          show-overflow-tooltip
          label="结算金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        >
          <template slot="header">
            <span >结算金额(元)</span>
          </template>
          <template slot-scope="scope">
            <span :class=" Number(scope.row.prices) != 0 ? 'font_warning' : 'font_black'">{{ scope.row.prices }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="real_price"
          show-overflow-tooltip
          label="实际金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        >
          <template slot="header">
            <span >实际金额(元)</span>
          </template>
          <template slot-scope="scope">
            <span :class=" Number(scope.row.real_price) != 0 ? Number(scope.row.real_price) > 0 ? 'font_success' : 'font_danger' : 'font_black'">{{ scope.row.real_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="created_at"
          show-overflow-tooltip
          label="结算时间"
          min-width="150"
          align="left"
          sortable="custom"
        ></el-table-column>
      </el-table>
      <pagination
        class="mt20"
        @paginationChange="paginateChange"
        :page_sizes= 'page_sizes'
        :total="total">
      </pagination>
    </el-dialog>

    <!-- 导出表格 -->
		<!-- <xy-excel-export-template ref="TerminalExportExcel"></xy-excel-export-template> -->
  </div>
</template>

<script>
import pagination from '~/components/pagination'
import exportExcel from '~/components/excelExport'
export default {
  components: {
    pagination,
    exportExcel
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      loading: false,
      finalId: null,
      per_page: 10,
      current_page: 1,
      total: 0,
      page_sizes: [10, 15],
      totalData: {},
      downLoadList:[
        {
          label: '订单编号',
          isSelect: true,
          props: 'order_number'
        },
        {
          label: '定稿名称',
          isSelect: true,
          props: 'finalName'
        },
        {
          label: '结算名称',
          isSelect: true,
          props: 'name'
        },
        {
          label: '扣款金额',
          isSelect: true,
          props: 'deduction'
        },
        {
          label: '奖励金额',
          isSelect: true,
          props: 'reward'
        },
        {
          label: '结算金额',
          isSelect: true,
          props: 'prices'
        },
        {
          label: '实际金额',
          isSelect: true,
          props: 'real_price'
        },
        {
          label: '结算时间',
          isSelect: true,
          props: 'created_at'
        },
      ],
      excelName: '上月结算明细列表'
    };
  },
  methods: {
    //导出excel
    exportExcel(args) {

      let params = {
        allPage: 2,
        agent_id: this.agentId,
      }
      if (!args[1]) {
        params = {...params, ...this.paramsByOrder, ...this.search_params}
      }
      this.$refs.exportExcel.downloadLoading = true
      this.$axios
      .get("api/settlement/pre_month_details", {params:params})
      .then(res => {
        if (res.data.code == 200) {
          if (res.data.data.length == 0) {
            this.$alert('暂无打款明细', '提示', {
              confirmButtonText: '确定',
              center: true,
              type: 'warning',
              callback: action => {
              }
            })
            return
          }
          let exTableData = []
          let item = {}
          for (let i in JSON.parse(JSON.stringify(res.data.data))) {
            item = res.data.data[i]
            exTableData.push(item)
          }
          this.$refs.exportExcel.exportExcelLastMonthSettlement(args[0], this.downLoadList, exTableData)
          this.$refs.exportExcel.downloadLoading = false
        } else {
          this.$refs.exportExcel.downloadLoading = false
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'warning',
            callback: action => {
            }
          });
        }
      });
    },
    async show() {
      this.isShow = true;
      this.agentId = this.$store.state.user.id
      await this.getData();
    },
    getData(args) {
      let params = {
        agent_id: this.agentId,
        page: this.current_page,
        perPage: this.per_page
      }
      if (args) {
        params= {...params, ...args}
      }
      this.loading = true
      this.$axios
        .get("api/settlement/pre_month_details", {params:params})
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.loading = false
              this.$alert('暂无结算明细', '提示', {
                confirmButtonText: '确定',
                center: true,
                type: 'warning',
                callback: action => {
                }
              })
              return
            }
            this.tableData = res.data.data
            this.total = res.data.page.total
            this.totalData = res.data.total
            this.loading = false
          } else {
            this.loading = false
            this.$alert(res.data.message, '提示', {
              confirmButtonText: '确定',
              center: true,
              type: 'warning',
              callback: action => {
              }
            });
          }
        });
    },
    paginateChange(params) {
      this.per_page = params.perPage
      this.current_page = params.page
      this.getData()
    },

    closeDialog() {
      this.tableData = [];
      // this.show = false;
    },

    // 表尾合计
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '结算总和(含税)';
          return;
        }
        if (column.label === '扣款金额(元)') {
          sums[index] = this.totalData.deduction_sum
        }
        if (column.label === '奖励金额(元)') {
          sums[index] = this.totalData.reward_sum
        }
        if (column.label === '结算金额(元)') {
          sums[index] = this.totalData.prices_sum
        }
        if (column.label === '实际金额(元)') {
          sums[index] = this.totalData.real_price
        }


      })

      return sums
    },
    tableSortChange(column) {
      let params= {
        sort_str: column.prop
      };
      if (column.order == "ascending") {
        params.sort_order = "asc";
      } else if (column.order == "descending") {
        params.sort_order = "desc";
      } else {
        params = {};
      }
      this.getData(params);
    }
  }
};
</script>

<style lang='less' type='text/css'>
.settlement-details {
  .el-table {
    .el-table__body {

    }
    .el-table__footer-wrapper {
      .el-table__footer {
        div {
          font-weight: 700;
        }
      }
    }
  }
  .exportExcel {
		i {
			color: #333333;
		}
	}
}
</style>
